<template>
  <div class="root">
    <nav id="nav" class="clearfix">
      <ul class="menu">
        <li><router-link class="router-link" to="/shouye">首页</router-link></li>
        <li>
          <router-link class="router-link" to="/user">用户管理</router-link>
        </li>
        <li><router-link class="router-link" to="/coupon">已发放优惠券</router-link>
          <ul class="sub-menu">
            <li><router-link class="router-link" to="/coupon/list">优惠券管理</router-link></li>
          </ul></li>
        <li>
          <router-link class="router-link" to="/order">订单管理</router-link>
        </li>
        <li>
          <router-link class="router-link" to="/machine">洗车机管理</router-link>
        </li>
      </ul>
      <div class="logout">
        <span class="logout__sitename">mino洗车后台管理系统</span>
        <span class="logout__username">管理员，欢迎你</span>
        <el-button type="text" @click.prevent="logout">退出</el-button></div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'SiteNav',
  methods: {
    // 获取指定cookie
    getCookie: function (name) {
      name = name + '='
      let start = document.cookie.indexOf(name)
      let value = null
      if (start > -1) {
        var end = document.cookie.indexOf(';', start)
        if (end === -1) {
          end = document.cookie.length
        }
        value = document.cookie.substring(start + name.length, end)
        let array = value.split(',')
        this.cookie_history = Array.from(new Set(array))
      }
    },
    // 清除token退出登录
    clearCookie: function (name) {
      var exp = new Date()
      exp.setTime(exp.getTime() - 1)
      var cval = this.getCookie(name)
      if (cval !== null) {
        document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
      }
    },
    logout () {
      this.$confirm('确定退出？', '提示')
        .then(() => {
          this.clearCookie('token')
          this.$router.push('/login')
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss" type="text/scss">
  #nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #545c64;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    & > .menu {
      float: left;
      list-style: none;
      margin: 0;
      padding: 0 0 0 20px;
      display: flex;
      & > li {
        position: relative;
        & > .router-link {
          display: block;
          padding: 10px 20px;
          text-decoration: none;
          color: #eeeeee;
          &:hover {
            background-color: lighten(#545c64, 10%);
          }
        }
        & > .router-link-active {
          position: relative;
          color: #ffffff;
          background-color: #409EFF;
          &:after {
            content: ' ';
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            background-color: #409EFF;
          }
          &:hover {
            background-color: #409EFF;
          }
        }
        &:hover .sub-menu {
          display: block;
        }
      }
    }
    .sub-menu {
      display: none;
      list-style: none;
      position: absolute;
      top: 100%;
      left: 0;
      margin: 0;
      padding: 0;
      white-space: nowrap;
      background-color: #545c64;
      .router-link {
        position: relative;
        display: block;
        padding: 0 20px;
        width: 100px;
        height: 45px;
        line-height: 45px;
        text-decoration: none;
        color: #eeeeee;
        &:hover {
          background-color: #6b7680;
        }
      }
      .router-link-active {
        color: #409EFF;
      }
    }
    .logout {
      position: absolute;
      top: 50%;
      right: 1em;
      transform: translateY(-50%);
      .logout__sitename {
        margin-right: 1em;
        font-weight: bold;
        color: #409EFF;
      }
      .logout__username {
        margin-right: 5px;
        color: #aaaaaa;
      }
      .el-button.el-button--text {
        color: #aaaaaa;
        &:hover {
          color: #ffffff;
        }
      }
    }
  }
</style>

